<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<title>LightWindow Demo</title>

	<!-- Meta Tags -->
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="robots" content="index, follow" />
	
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="css/default.css" />
    <link rel="stylesheet" type="text/css" href="css/lightwindow.css" />
    
	<!-- JavaScript -->
	<script type="text/javascript" src="javascript/prototype.js"></script>
	<script type="text/javascript" src="javascript/effects.js"></script>
	<script type="text/javascript" src="javascript/lightwindow.js"></script>


</head>

<body>

	<div class="page-top"></div>

		
	<div class="page-body">
	

				<h1 style="color: #FFFFFF;">LightWindow v2.0 <span>Demos</span></h1>
				<p><small>NOTE: </small>I use some large example files here for the media, hence it is best that your browser window is larger than 800px for these demos.</p>
				<h2>Media <span>Movies, Flash, PDF's... just link directly to the file!</span></h2>
				<p>
					<a href="gallery/spider-man3-trl3.mov" class="lightwindow page-options" params="lightwindow_width=640,lightwindow_height=320" ><strong>Quicktime Movie Example</strong> - 20MB Local File!</a>
					<a href="gallery/fische01.mov" class="lightwindow page-options" params="lightwindow_width=320,lightwindow_height=260" ><strong>Quicktime Movie Example</strong> - 5MB Local File!</a>
					<a href="http://images.apple.com/movies/dreamworks/transformers/transformers-tlr4_h.640.mov" class="lightwindow page-options" params="lightwindow_width=640,lightwindow_height=288" ><strong>Apple.com Trailer</strong> - Transformers, more than meets the eye!</a>

					<a href="http://www.kayotix.com/av/video/wmv/canon/canon_what_a_picture.wmv" class="lightwindow page-options" params="lightwindow_width=300,lightwindow_height=288,lightwindow_loading_animation=false,lightwindow_iframe_embed=true" ><strong>WMV Example</strong> - Even Windows Media Player!</a>

					<a href="gallery/header2.swf?scale=noscale&amp;tag1=Sooth Your Mind &amp; Body&amp;tag2=Justice Through Integrity&amp;tag3=Helping Injured Victims&amp;tag4=Experience You Can Trust" class="lightwindow page-options" params="lightwindow_width=843,lightwindow_height=324" title="Preview: Doesn't your masthead look perdy?"><strong>Single SWF Example</strong> - Because I <strong>Love</strong> Flash...</a>
                    
					<a href="gallery/header.swf?scale=noscale&amp;tag1=Sooth Your Mind &amp; Body&amp;tag2=Justice Through Integrity&amp;tag3=Helping Injured Victims&amp;tag4=Experience You Can Trust" class="lightwindow page-options" rel="Flash Gallery[Headers]" params="lightwindow_width=800,lightwindow_height=345" title="Gallery: Doesn't your masthead look perdy?" author="Einstein Industries" ><strong>SWF Gallery</strong> - Any media can now be used in a GALLERY!</a>
					<a href="gallery/header2.swf?scale=noscale&amp;tag1=Sooth Your Mind &amp; Body&amp;tag2=Justice Through Integrity&amp;tag3=Helping Injured Victims&amp;tag4=Experience You Can Trust" class="lightwindow hidden" rel="Flash Gallery[Headers]" params="lightwindow_width=843,lightwindow_height=324" title="Gallery: The second masthead is nice too..." author="Einstein Industries" >Header #2</a>
					<a href="gallery/header3.swf?scale=noscale&amp;tag1=Sooth Your Mind &amp; Body&amp;tag2=Justice Through Integrity&amp;tag3=Helping Injured Victims&amp;tag4=Experience You Can Trust" class="lightwindow hidden" rel="Flash Gallery[Headers]" params="lightwindow_width=769,lightwindow_height=209" title="Gallery: But I like this one more!" author="Einstein Industries" >Header #3</a>

					<a href="http://www.cheathamlane.net/clients/SFCM/flash/index.html" class="lightwindow page-options" params="lightwindow_width=600,lightwindow_height=450,lightwindow_loading_animation=false" title="CheathamLane :: Interactive 360&deg; Photography &amp; Flash" ><strong>User Example</strong> - CheathamLane.net</a>
					<a href="gallery/frontdoor_doc.swf" class="lightwindow page-options" params="lightwindow_iframe_embed=true" title="Flash Paper" ><strong>Flash Paper</strong> - The RIGHT way to embed a PDF!</a>

 					<a href="http://www.youtube.com/v/uhi5x7V3WXE" class="lightwindow page-options" params="lightwindow_width=425,lightwindow_height=340,lightwindow_loading_animation=false" title="YouTube: 300 Preview" ><strong>You Tube</strong> - 300 Preview</a>
       
				</p>
				
				<h2>External Sources <span>Look Ma! It's like a popup window! (Other Domains)</span></h2>
				<p>
					<a href="http://www.rubyonrails.com/" class="lightwindow page-options" title="Ruby on Rails" caption="One of my favorites, and really it should be one of yours."><strong>Website Example</strong> - Preview any website from yours!</a>
					<a href="blank.html" class="lightwindow page-options" params="lightwindow_type=external"><strong><span style="color: red;">NEW</span> Page Treated as External</strong> - This page is local to this domain but is placed in an iframe.</a>
				</p>
	
    			<h2>Frame Calls <span style="color: red;">NEW</span> <span>Call a LightWindow from a frame!</span></h2>
				<p>
                	<iframe id="iframe_test" src="iframe.html" frameborder="1" allowtransparency="true" scrolling="no" width="100%" height="25" ></iframe>
				</p>
                
				<h2>Images <span>Singles or Gallery Sets!</span></h2>
				<p>				
					<a href="gallery/image-5.jpg" class="lightwindow page-options" title="What is this Plant?" author="Unknown" caption="Whatever it is, it is still a pretty cool picture. Whatever it is, it is still a pretty cool picture. Whatever it is, it is still a pretty cool picture. Whatever it is, it is still a pretty cool picture."><strong>Image</strong> - Just an image, a decently large one.</a>
					
					<a href="http://farm1.static.flickr.com/180/439443686_bc797081ea.jpg" class="lightwindow page-options" title="Bob, Donna and my son Kote" author="My Wife" caption="Three of some of the most important people in my life."><strong><span style="color: red;">NEW</span> External Image</strong> - An Image pulled from an External Source.</a>
					
					<a href="gallery/0.jpg" class="lightwindow page-options" rel="Random[Sample Images]" title="High 5 Dood!" caption="Snow people know how to have fun..." author="Unknown"><strong>Image Gallery</strong> - Everyone needs a killer gallery!</a>
					<a href="gallery/1.jpg" class="lightwindow hidden" rel="Random[Sample Images]" title="Snow People Playing Football" caption="Please don't kick me!" author="Unknown">image #1</a>
					<a href="gallery/header3.swf?scale=noscale&amp;tag1=Sooth Your Mind &amp; Body&amp;tag2=Justice Through Integrity&amp;tag3=Helping Injured Victims&amp;tag4=Experience You Can Trust" class="lightwindow hidden" rel="Random[Sample Images]" params="lightwindow_width=769,lightwindow_height=209" title="Oh My! Flash and Images Mixed!" >Header #3</a>
					<a href="gallery/2.jpg" class="lightwindow hidden" rel="Random[Sample Images]" title="Left Behind" caption="...it didn't smell that bad..." author="Unknown">image #2</a>                                     
					<a href="gallery/3.jpg" class="lightwindow hidden" rel="Random[Sample Images]" title="Where your water comes from?" caption="Tasty H20 ;)" author="Unknown">image #3</a>
					<a href="gallery/4.jpg" class="lightwindow hidden" rel="Random[Sample Images]" title="Beware of warewolves..." caption="They are hungry and you are food!" author="Unknown">image #4</a>
					<a href="gallery/5.jpg" class="lightwindow hidden" rel="Random[Sample Images]" title="Elf Behind a Tree" caption="He's there, sneaky elves..." author="Unknown">image #5</a>

					<a href="gallery/0-evolution.jpg" class="lightwindow page-options" rel="Evolution?[Man]" title="The Evolution of Man is looking grim..." caption="Man starts out kinda hairy..." author="Unknown" params="lightwindow_show_images=2"><strong>Image Gallery w/Multiple Images</strong> - Side by Sides can be good for Before and After Gallery's or to show actions, etc.!</a>
					<a href="gallery/1-evolution.jpg" class="lightwindow hidden" rel="Evolution?[Man]">image #1</a>
					<a href="gallery/2-evolution.jpg" class="lightwindow hidden" rel="Evolution?[Man]" title="The Evolution of Man is looking grimmer..."  caption="Later, Man seems to have learned how to sharpen stuff!" params="lightwindow_show_images=2">image #2</a>
					<a href="gallery/3-evolution.jpg" class="lightwindow hidden" rel="Evolution?[Man]">image #3</a>
					<a href="gallery/4-evolution.jpg" class="lightwindow hidden" rel="Evolution?[Man]" title="We are screwed!" caption="Finally, Man discovers how to comb his hair and order from McDonalds™... only one thing bigger than a Big Mac™." params="lightwindow_show_images=2">image #4</a>
					<a href="gallery/5-evolution.jpg" class="lightwindow hidden" rel="Evolution?[Man]">image #5</a>

				</p>
	
				<h2>Instantiate 1 by 1 <span>when you need to add one window or re-add it or whatever</span></h2>
				<p>
                	<input type="button" onclick="javascript: if (!$('sample-link').onclick) {myLightWindow.createWindow('sample-link'); exampleCreated = true;}" value="Instantiate the Link Below" />
                    or 
					<input type="button" onclick="javascript: myLightWindow.activateWindow({href: 'http://stickmanlabs.com/images/kevin_vegas.jpg', title: 'Waiting for the show to start in Las Vegas', author: 'Jazzmatt', caption: 'Mmmmmm Margaritas! And yes, this is me...', left: 300});" value="Launch it from this Button!" />
				</p>
                
				<p>
					<a href="http://stickmanlabs.com/images/kevin_vegas.jpg" class="page-options" title="Waiting for the show to start in Las Vegas" author="Jazzmatt" caption="Mmmmmm Margaritas! And yes, this is me..." id="sample-link"><strong><span style="color: red;">NEW</span> A link with no Class</strong> - As in no Class Name! We built this one with a function call.</a>
				</p>				
				
				<h2>Forms <span>yes, yes it does work...</span></h2>
				<p>
					<a href="form.html" params="lightwindow_width=175,lightwindow_height=60" class="lightwindow page-options"><strong>Form Example</strong> - Submit a form in a lightWindow!</a>
					<a href="form.html" params="lightwindow_width=175,lightwindow_height=60,lightwindow_top=200,lightwindow_left=300" class="lightwindow page-options"><strong><span style="color: red;">NEW</span> Form Example with a custom position</strong> - Submit a form in a lightWindow!</a>
				</p>
				
				<h2>Pages <span>Fixed width and Fluid.</span></h2>
				<p>
					<a href="blank.html" class="lightwindow page-options"><strong>Fluid Page</strong> - This page does not have a width, the content is flexible.</a>
					<a href="blank-width.html" class="lightwindow page-options"><strong>Fixed Page</strong> - This page has a defined amount of space it needs or it will cause a horizontal scroll.</a>
					<a href="blank-huge.html" class="lightwindow page-options" title="Sample Title"><strong>Monster Fixed Page</strong> - This page is just plain to big for the browser window unless you maximize a 30 inch monitor.</a>
					<a href="blank.html" params="lightwindow_width=800,lightwindow_height=350" class="lightwindow page-options"><strong>Set Dimensions</strong> - Set the dimensions of the window.</a>
				</p>
				
				<h2>Inline Content <span>They call this a gimme :)</span></h2>
				<p>
					<a href="#inline-sample" class="lightwindow page-options"><strong>Inline Content</strong> - Not a fan of AJAX? No worries, here you go.</a>
				</p>		


        
	</div>

	<div class="page-footer">
		<p>&copy; Copyright 2007 <a href="http://www.stickmanlabs.com/"><small>stickmanlabs</small></a></p>
		<p>LightWindow is freely distributable under the terms of an MIT-style license.</p>
	</div>

<!-- Hidden stuff for demos -->
<div id="inline-sample" >
	
					
	<div >
	<p>Oh yeah, this content was pulled from within the page!</p>
	<p>In order to get the LightWindow to fit the content, you have to define the height and width of a div in the inline div or send values for lightwindow_width and lightwindow_height in the url string.   Personally I prefer the inner div method, this way you can gracefully degrade the link as I did into an anchor if javascript isn't available.</p>
	<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
	</p>
	</div>
	
	<a href="gallery/0-nature.jpg" class="lightwindow hidden" rel="/\\:;*?<>'”|®™©&#[Nature]" title="Perdy Horsey" caption="I'm too kewl fer skewl!" author="Unknown">image #1</a>
	<a href="gallery/1-nature.jpg" class="lightwindow hidden" rel="/\\:;*?<>'”|®™©&#[Nature]" title="Where do flowers come from?" caption="Other flowers of course..." author="Unknown">image #3</a>

	<a href="gallery/0-sushi.jpg" class="lightwindow hidden" rel="/\\:;*?<>'”|®™©&#[Sushi]" title="Left Behind" caption="Look's super tasty!" author="Unknown">image #1</a>
	<a href="gallery/1-sushi.jpg" class="lightwindow hidden" rel="/\\:;*?<>'”|®™©&#[Sushi]" title="Beware of warewolves..." caption="I shouldn't be doing this when I am hungry" author="Unknown">image #2</a>
	<a href="gallery/2-sushi.jpg" class="lightwindow hidden" rel="/\\:;*?<>'”|®™©&#[Sushi]" title="That was good!" caption="Take that sushi!" author="Unknown">image #3</a>

</div>



</body>
</html>